<template>
  <div class="body">
    <div class="页眉">
    </div>
    <!--分栏-->
    <el-row :gutter="16" type="flex" justify="center">
      <!--菜单栏-->
      <el-col :span="4">
        <div class="文本框" style="height: 900px;">
          <el-menu  router>
            <el-menu-item index="/CreationCenter" >
              <div class="文本">
                <i class="el-icon-menu"></i>
                首页
              </div>
            </el-menu-item>
            <el-submenu index="001">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-edit-outline"></i>
                  创作
                </div>
              </template>
              <el-menu-item index="/CreationCenter/SendArticle">发布文章</el-menu-item>
              <el-menu-item index="/CreationCenter/SendVideo">发布视频</el-menu-item>
              <el-menu-item index="/CreationCenter/SendReport">发布研报</el-menu-item>
              <el-menu-item index="/CreationCenter/SendTinyArticle">发布富微条</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/ManageArticle">
              <div class="文本">
                <i class="el-icon-reading"></i>
                作品管理
              </div>
            </el-menu-item>
            <el-submenu index="002">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-view"></i>
                  互动管理
                </div>
              </template>
              <el-menu-item index="/CreationCenter/ManageFollow">关注管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManageComment">评论管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManagePM">私信管理</el-menu-item>
            </el-submenu>
            <el-submenu index="003">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-document"></i>
                  数据分析
                </div>
              </template>
              <el-menu-item index="/CreationCenter/DataArticle">作品数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataFans">粉丝数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataProfit">收益数据</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/Option">
              <div class="文本">
                <i class="el-icon-setting"></i>
                设置
              </div>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <!--正文栏-->
      <el-col :span="14">
        <div class="文本框">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/CreationCenter' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>作品管理</el-breadcrumb-item>
          </el-breadcrumb>
          <br/>

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane>
              <span slot="label" style="font-size: 18px">文章</span>
              <!--具体表格-->
              <el-table
                  :data="articleCollection"
                  style="width: 100%"
                  :show-header="false">
                <el-table-column>
                  <template slot-scope="scope">

                    <el-row>
                      <el-col :span="6">{{ scope.row.articleCover }}1</el-col>
                      <el-col :span="10">
                        <div class="文本-中">{{scope.row.articleTitle}}</div>
                      </el-col>
                      <el-col :span="8">
                        <div class="文本-小 右侧">
                          {{scope.row.videoTime}}
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="10" :offset="6">
                        <div class="文本">
                          获赞 {{scope.row.articleThumbups}}
                          · 评论 {{scope.row.articleComments}}
                          · 浏览 {{scope.row.articleReadings}}
                        </div>
                      </el-col>
                      <el-col :span="8" class="右侧">
                        <el-button type="text" style="padding-top: 0px; padding-bottom: 0px;">查看数据</el-button>
                        <el-button type="text" style="padding-top: 0px; padding-bottom: 0px;">查看评论</el-button>
                        <el-button type="text" style="padding-top: 0px; padding-bottom: 0px;">修改</el-button>
                        <el-button type="text" style="padding-top: 0px; padding-bottom: 0px;" @click="dialogVisible = true; idx= scope.$index;">删除</el-button>
                      </el-col>
                    </el-row>

                  </template>
                </el-table-column>

              </el-table>
              <br/>
              <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="total"
                  :current-page="current"
                  :page-size="pageSize"
                  @current-change="handleCurrentChange"
              >
              </el-pagination>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" style="font-size: 18px">视频</span>
              <!--具体表格-->
              <el-table
                  :data="videoCollection"
                  style="width: 100%"
                  :show-header="false">
                <el-table-column>
                  <template slot-scope="scope">

                    <el-row>
                      <el-col :span="6">{{ scope.row.videoCover }}1</el-col>
                      <el-col :span="10">
                        <div class="文本-中">{{scope.row.videoAbstract}}</div>
                      </el-col>
                      <el-col :span="8">
                        <div class="文本-小 右侧">
                          {{scope.row.videoCreatetime}}
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="10" :offset="6">
                        <div class="文本">
                          获赞 {{scope.row.videoThumbups}}
                          · 评论 {{scope.row.videoComments}}
                          · 播放 {{scope.row.videoViews}}
                        </div>
                      </el-col>
                      <el-col :span="8" class="右侧">
                        <el-button type="text" style="padding-top: 0px; padding-bottom: 0px;">查看数据</el-button>
                        <el-button type="text" style="padding-top: 0px; padding-bottom: 0px;">查看评论</el-button>
                        <el-button type="text" style="padding-top: 0px; padding-bottom: 0px;">修改</el-button>
                        <el-button type="text" style="padding-top: 0px; padding-bottom: 0px;" @click="">删除</el-button>
                      </el-col>
                    </el-row>

                  </template>
                </el-table-column>

              </el-table>
              <br/>
              <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="total"
                  :current-page="current"
                  :page-size="pageSize"
                  @current-change="handleCurrentChange"
              >
              </el-pagination>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" style="font-size: 18px">富头条</span>

            </el-tab-pane>
          </el-tabs>









        </div>



      </el-col>
    </el-row>

    <div class="页眉">
    </div>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <span>您确定要删除此作品？</span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="deleteArticle">确定</el-button>
      </span>
    </el-dialog>



  </div>
</template>

<style>
.deleteBorder .el-tabs__nav-wrap::after{
  height: 0;
}
/*去掉el-tab-pane切换时的蓝色下划线*/
.deleteBorder .el-tabs__active-bar{
  background: transparent;
}
</style>

<script>
export default {
  data() {
    return {
      activeName: '0',
      activeName_2: '1',
      activeName_3: '1',
      dialogVisible: false,
      idx: 0,
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",

      total: 100,
      pageSize: 10,
      current: 3,

      topFlag:['置顶','取消置顶'],

      file_num :4,

      queryByUserIdAndPage: {
        idUser: window.sessionStorage.getItem("idUser"),
        page:1
      },
      deleteArticleById: 0,
      articleCollection: [],
      videoCollection: []
    }
  },
  created() {
    this.getUserArticleByUserId(),
    this.getUserVideoByUserId()
  },
  methods: {
    async deleteArticle() {
      this.dialogVisible = false
      this.deleteArticleById = this.articleCollection[this.idx].idArticle;
      console.log(this.deleteArticleById)
      const {data: res} = await this.$http.delete('http://39.102.76.217:8100/article/delete', {
        params: {
          idArticle: this.deleteArticleById
        }
      });
      console.log(res)
      if(res.articleStatus == 1) {
        this.getUserArticleByUserId()
        this.$message({
          message: '删除成功！',
          type: 'success'
        });
      }
      else {
        this.$message.error('删除失败！');
      }
    },
    async getUserArticleByUserId() {
      const {data: res} = await this.$http.get('http://39.102.77.65:8081/article/getArticleByIdUser', {
        params:this.queryByUserIdAndPage
      })
      this.articleCollection=res.writings
      console.log(res)
    },
    async getUserVideoByUserId() {
      this.queryByUserIdAndPage.page-=1
      const {data: res} = await this.$http.put('http://39.102.77.65:8089/video/getuserpublishedvideoinfolist', this.queryByUserIdAndPage)
      this.videoCollection=res.data
      this.queryByUserIdAndPage.page+=1
      console.log(res)
    },
    handleCurrentChange(newPage){
      console.log(newPage)
      this.current=newPage
    }
  }
};
</script>